<template>
  <el-dialog v-model="showForm" title="备注订单" width="500px" :close-on-click-modal="false">
    <el-form ref="logisticsFormRef" :model="logisticsForm" :rules="logisticsFormRule">
      <el-form-item label="备注" prop="remark">
        <el-input v-model="logisticsForm.remark" :rows="3"  maxlength="200" show-word-limit type="textarea"/>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleLogisticsInfoClose">取消</el-button>
        <el-button type="primary" @click="submitForm(logisticsFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { setRemarkOrder } from "@/api/pointsMall";
import { IOrderPageRow } from "@/api/modules/pointsMall";

const props = defineProps<{
  show: boolean,
  orderData: IOrderPageRow
}>()

const emits = defineEmits(['update:show', 'refresh'])
const Route = useRoute();
const orderData: any = toRef(props, 'orderData')
const show = toRef(props, 'show')
const name = ref('')
const logisticsFormRef = ref<FormInstance>()
const logisticsFormRule = reactive<FormRules>({
  remark: [{
    required: true,
    message: '备注是必填项',
    trigger: 'blur',
  }],
})

const logisticsForm = reactive({
  remark: '',
  orderId: Route.query.id,
  businessType: 'activity',
})

const showForm = computed({
  get() {
    return props.show
  },
  set() {
    emits('update:show', false)
  }
})

watch(showForm, () => {
  /* ... */
  if(showForm.value){
    logisticsForm.remark = orderData.value.ext.remark
  }
})

const handleLogisticsInfoClose: () => void = () => {
  showForm.value = false
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleLogisticsInfoConfirm()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleLogisticsInfoConfirm: () => void = async() => {
  let rs: any = await setRemarkOrder(logisticsForm)
  if(rs.code === 200) {
    ElMessage.success("备注更新成功");
    handleLogisticsInfoClose()
    clearForm()
    refresh()
  }
  
}

const refresh = () =>{
  emits('refresh')
}

const clearForm = () => {
  logisticsForm.remark = ''
}


</script>

<style scoped lang="scss">
</style>